<template>
  <div>
    <van-popup :show="popshow" round get-container="body" close-on-click-overlay="false" custom-style="width:85%;height:50%;border-radius:4px;" :overlay="true" @close="onClose">
      <div class="mainForm">
        <van-form class="vanForm">
          <van-cell-group class="vanGroup">
            <div class="title">
              添加维修记录
            </div>
            <div class="timeStyle">
              <van-field v-model="mainForm.maintenanceDate" label="维修时间" required placeholder-style="color:#999;" readonly is-link input-align="right" placeholder="请选择" clickable @change="mainForm.maintenanceDate = $event.detail" @click-input="clickMain" />
              <van-popup class="maintenceSty" :show="showTime" position="bottom">
                <van-datetime-picker type="date" :value="currentDate" :min-date="minDate" :basic-formatter="basicFormatter" @confirm="onMainTime" @cancel="onCancelMain" />
              </van-popup>
            </div>
            <div class="timeStyle">
              <van-field v-model="mainForm.maintenanceReason" class="workClass" label="维修原因" placeholder-style="color:#999;" autosize required placeholder="请输入维修原因" type="textarea" @change="mainForm.maintenanceReason = $event.detail" />
            </div>
          </van-cell-group>
        </van-form>
        <div class="workBtn">
          <div class="cancel" @click="onClose">
            取消
          </div>
          <div class="submit" @click="getform">
            确定
          </div>
        </div>
      </div>
    </van-popup>
  </div>
</template>
<script>
import Toast from '@/wxcomponents/vant/toast/toast'
export default {
  components: {},
  props: { },
  data() {
    return {
      popshow: false,
      showTime: false,
      mainForm: {
        maintenanceDate: '',
        maintenanceReason: '',
      },
      currentDate: new Date().getTime(),
      minDate: new Date(1970, 1, 1).getTime(),
    }
  },
  methods: {
    // 处理控件显示的时间格式
    basicFormatter(type, value) {
      if (type === 'year') {
        return `${value}年`
      } else if (type === 'month') {
        return `${value}月`
      } else if (type === 'day') {
        return `${value}日`
      }
      return value
    },
    clickMain() {
      this.showTime = true
    },
    onMainTime(val) {
      const date = new Date(val.detail)
      const Year = date.getFullYear()
      const Moth = (date.getMonth() + 1 < 10 ? `0${date.getMonth() + 1}` : date.getMonth() + 1)
      const Day = (date.getDate() < 10 ? `0${date.getDate()}` : date.getDate())
      const GMT = `${Year}-${Moth}-${Day}`
      this.mainForm.maintenanceDate = GMT
      this.showTime = false
    },
    onCancelMain() {
      this.showTime = false
    },
    // 添加
    open() {
      this.popshow = true
      // this.$refs.inputForm.cleanInput()
      this.mainForm = {
        maintenanceDate: '',
        maintenanceReason: '',
      }
    },
    // 编辑
    edit(item) {
      item.isEdit = true
      this.mainForm = item
      this.popshow = true
    },
    // 关闭弹窗
    onClose() {
      this.popshow = false
    },
    // 提交
    getform() {
      if (this.mainForm.maintenanceDate.trim().length === 0) {
        Toast('请选择维修日期')
        return
      }
      if (this.mainForm.maintenanceReason.trim().length === 0) {
        Toast('请输入维修原因')
        return
      }
      this.onClose()
      this.$emit('mainValue', this.mainForm)
    },
  },
}
</script>
<style lang="scss" scoped>
.mainForm{
    color:#333;
    font-size: 18px;
    font-weight: 600;
    text-align: center;
    height:100%;
    .title{
      height:20%;
      display: flex;
      align-items: center;
      justify-content: center;
      padding-bottom: 20px;
    }
    .workBtn{
        display: flex;
        color:#739ECA;
        height:64px;
        position: fixed;
        left: 0;
        bottom: 0;
        width: 100%;
        .cancel{
            width: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            border:1px solid #F2F2F2;
        }
        .submit{
            width: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            border:1px solid #F2F2F2;
            border-left: none;
        }
    }
}
</style>
<style lang="scss">
.maintenceSty{
  .van-popup{
    overflow-y: hidden !important;
  }
}
.workClass{
  view {
    label{
      width:100%;
      display: flex;
      white-space: nowrap;
    }
    input{
      padding-right: 16px;
      text-align: right;
      color:#999;
    }
    textarea{
      padding-right: 16px;
      text-align: right;
      color:#999;
    }
  }
}
.timeStyle{
  height: 20%;
  view label{
    width:100%;
    display: flex;
  }
  view input{
    color:#999;
  }
}
</style>
